<template>
  <div class="card w-100" v-loading="loading">
    <div>
      <div class="pt-5 text-center h1 font-weight-bold text-primary">{{ ratingResult || '-' }}</div>
      <div class="text-center py-2">当前季度评级结果</div>
      <div class="text-center py-2">说明： {{ empt }}</div>
    </div>
    <h4 class="p-3">评级记录</h4>
    <div class="w-100 text-right">
      <el-button class="mr-3" type="primary" @click="addGrade">评级申请</el-button>
    </div>

    <div class="p-3 w-100">
      <c-table border v-loading="loading" :columns="tableColumns" :data="tableData">
        <template v-slot:itemStatus="scope">
          <span class="badge" :class="`badge-${scope.row.itemStatusStyle}`">
            {{ scope.row.itemStatusLabel }}
          </span>
        </template>
      </c-table>
      <div class="query-pagination">
        <div></div>
        <el-pagination
          layout="total, prev, pager, next, jumper"
          :current-page.sync="params.index"
          :page-size="params.size"
          :total="totalCount"
          @current-change="getData"
        ></el-pagination>
      </div>
    </div>

    <new-grade :visible.sync="newVisible" :tableId="tableId" @success="getData()"></new-grade>

    <grade-view :visible.sync="viewVisible" :query-id="queryId"></grade-view>
  </div>
</template>

<script>
import NewGrade, { enumQuarter } from '@/credit/views/city/grade/NewGrade'
import GradeView from '@/credit/views/city/grade/GradeView'
import { mapGetters } from 'vuex'
const enumApprovalStatus = {
  1: { style: 'info', label: '审批中' },
  2: { style: 'primary', label: '审批通过' },
  3: { style: 'danger', label: '审批退回' },
}
export default {
  components: {
    NewGrade,
    GradeView,
  },
  props: {},
  data() {
    return {
      loading: false,
      tableData: [],
      totalCount: 0,
      tableColumns: [
        { attrs: { label: '序号', prop: 'index', width: 80, align: 'center' } },
        {
          attrs: { label: '被评机构', align: 'center', minWidth: 100 },
          process: () => this.org.orgName,
        },
        { attrs: { label: '评级期限', prop: 'date', align: 'center' } },
        { attrs: { label: '评级结果', prop: 'rating_result', align: 'center' } },
        { attrs: { label: '申请日期', prop: 'createTime', align: 'center' } },
        { attrs: { label: '申请人', prop: 'submit_person_name', align: 'center', width: 120 } },
        {
          attrs: { label: '审批状态', prop: 'itemStatusLabel', align: 'center', width: 120 },
          slot: 'itemStatus',
        },
        {
          attrs: { label: '操作', align: 'center', width: 120 },
          operations: [
            {
              content: '修改',
              icon: 'fa fa-edit',
              event: this.addGrade,
              ifRender: row => +row.approval_status === 3,
            },
            {
              content: '查看',
              icon: 'fa fa-search',
              event: this.handleView,
            },
          ],
        },
      ],
      newVisible: false,
      tableName: 'agency_rating',
      formData: {},
      params: { index: 1, size: 4 },
      tableId: '',
      viewVisible: false,
      queryId: '',
      quarterData: {},
    }
  },
  computed: {
    ...mapGetters(['clientId', 'org']),
    ratingResult() {
      return this.quarterData?.rating_result ?? '-'
    },
    empt() {
      return this.quarterData?.approval_status === 2
        ? `权限内额度：${this.quarterData?.auth_amount_start ?? '-'}${
            this.quarterData?.is_margin_start ? '' : '（含）'
          }-${this.quarterData?.auth_amount_end ?? '-'}万${
            this.quarterData?.is_margin_end ? '' : '（含）'
          }`
        : '暂无评级'
    },
  },
  watch: {},
  created() {
    this.params['agency_id.eq'] = this.clientId
    this.getData()
    this.getTheQuery()
  },
  mounted() {},
  methods: {
    getTheQuery() {
      const date = new Date()
      this.$api
        .getData(
          'credit',
          this.tableName,
          {
            index: 1,
            size: 1,
            'year.eq': `${date.getFullYear()}`,
            'quarter.eq': `${Math.ceil((date.getMonth() + 1) / 3)}`,
            'agency_id.eq': this.clientId,
          },
          { create_time: 'desc' }
        )
        .then(res => {
          const data = res?.data ?? {}
          this.quarterData = data?.data?.[0] ?? {}
        })
    },
    getData(index = 1) {
      this.params.index = index
      this.loading = true
      this.$api
        .getData('credit', this.tableName, this.params, { create_time: 'desc' })
        .then(res => {
          this.tableData = (res?.data?.data || []).map(this.dataAdapter)
          this.totalCount = res?.data?.totalCount || 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    dataAdapter(item, index) {
      item.index = index + 1
      item.date = `${item.year}年${enumQuarter[item.quarter]}`
      item.createTime = this.$utils.dateFormat(item.create_time, 'yyyy-MM-dd')
      const approval = enumApprovalStatus[item.approval_status] || {}
      item.itemStatusLabel = approval.label
      item.itemStatusStyle = approval.style
      return item
    },
    addGrade(row = {}) {
      this.newVisible = true
      this.tableId = row.agency_rating_id || ''
    },
    handleView(row = {}) {
      this.viewVisible = true
      this.queryId = row.agency_rating_id || ''
    },
  },
}
</script>

<style lang="scss" scoped></style>
